export const addCheckboxComponent = (editor) => {
    const { Components } = editor;
    Components.addType('customCheckbox', {
        model: {
            defaults: {
                name: 'customCheckbox',
                droppable: false,
                attributes: { class: 'checkbox-group' ,'data-gjs-type':"customCheckbox"},
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'custom-checkbox' },
                        components: [
                            { type: 'span', attributes: { class: 'checkmark' } },
                            { type: 'text', attributes: { class: 'checkbox-text' }, content: '复选框' },
                         
                        ],
                        
                    },
                ],
                script() {
                    this.querySelector('.custom-checkbox').addEventListener('click', function() {
                        this.classList.toggle('checked');
                    });
                },
                styles: `
                  .checkbox-group {
                      width: 20%;
                      display: flex;
                      align-items: center;
                      position: relative;
                      cursor: pointer;
                      font-size: 16px;
                      user-select: none;
                      margin: 10px;
                  }
                  .custom-checkbox {
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      font-size: 16px;
                      user-select: none;
                  }
                  .checkmark {
                      display: inline-block;
                      width: 25px;
                      height: 25px;
                      background-color: #eee;
                      border-radius: 4px;
                      margin-right: 10px;
                      transition: background-color 0.3s;
                      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                  }
                  .custom-checkbox.checked .checkmark {
                      background-color: #2196F3;
                      box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
                  }
                  .custom-checkbox.checked .checkmark:after {
                      content: "";
                      position: absolute;
                      display: block;
                      left: 9px;
                      top: 5px;
                      width: 5px;
                      height: 10px;
                      border: solid white;
                      border-width: 0 3px 3px 0;
                      transform: rotate(45deg);
                  }
                `,
            },
        },
    });

    // 注册 customCheckbox 组件
    editor.BlockManager.add('custom-checkbox', {
        label: '复选框',
        category: '组件类',
        content: { type: 'customCheckbox' },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`
    });
};